<template>
	<view class="page">
		<view class="input-t">
			<text>任务名称</text>
			<text class="input-name"></text>
		</view>
		<view class="input-body">
			<textarea placeholder="请输入议题名称..." v-model="sendDate.name" class="input-textare" />
		</view>
		<view class="input-t">
			<text>指定任务落实部门</text>
			<text class="input-name"></text>
		</view>
		<view class="input-body" >
			<view class="cu-form-group" @click="goselectitem">
				<view >
					<view class="picker">
						请选择
					</view>
				</view>
			</view>
		</view>

		<view class="input-body">
			<view style="display: flex;flex-direction: row; justify-items: center;align-items: center;">
				<block v-for="(item, index) in selectPer" :key="index">
					<view style="padding: 10rpx;line-height: 50rpx;background-color: #303133;color: #FFFFFF;margin-left: 10rpx;border-radius: 10rpx;">
						{{item.name}}
					</view>
					<view style="margin-top: -30rpx;margin-left: -30rpx;" @click="delclick(index)" >
						<image src="/static/x1.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
					</view>


				</block>
			</view>
		</view>
		<view class="input-t">
			<text>实现落实活动截止日期</text>
			<text class="input-quick"></text>
		</view>
		<view class="input-body">
			<view class="cu-form-group">
				<view class="title">日期选择</view>
				<picker mode="date" v-model="date" @change="DateChange">
					<view class="picker">
						{{date}}
					</view>
				</picker>
			</view>
		</view>

		<!-- <view class="input-t">
			<text>指定任务督查人</text>
			<text class="input-name"></text>
		</view>
		<view class="input-body">
			<textarea placeholder="请指定督办人员..." v-model="sendDate.supervisor_user_id" class="input-textare" />
		</view> -->

		<button class="confirm-btn" :class="'bg-' + themeColor.name" :disabled="btnLoading" :loading="btnLoading"
			@tap="send">
			保存提交
		</button>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: '2021-06-07',
				type: '',
				mtype: '厅党组会',
				mtypeValue: '',
				remindType: [{
					value: '0',
					name: '不提醒'
				}, {
					value: '1',
					name: '消息提醒'
				}, {
					value: '2',
					name: '短信提醒'
				}],
				sendDate: {
					remind: '0',
					name: "",
					minutes: '',
					executive_user_id: '2',
					supervisor_user_id: '2',
					metting_id: '',
				},
				worksType: ["厅党组会议", "部门会议"],
				btnLoading: false,

				number: '请选择',
				selectPer: [],
				selectPerids:[],
			};
		},
		onLoad(event) {
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.themeColor.color,
				animation: {
					duration: 400,
					timingFunc: 'easeIn'
				}
			})
			this.sendDate.metting_id = event.id;
		},

		onShow() {
			uni.$on("returnItem", res => {
				this.selectPer = res.data;
				this.selectPerids = res.ids;
				this.number = res.data.length;
				// 清除监听
				uni.$off('returnItem');
			})
		},

		methods: {
			DateChange(e) {
				this.date = e.detail.value
			},
			// 监听反馈类型事件
			handleRemindTypeChange(e) {
				this.sendDate.remind = e.detail.value;
			},
			chooseType() {
				uni.showActionSheet({
					itemList: this.worksType,
					success: res => {
						this.mtype = this.worksType[res.tapIndex];
						this.mtypeValue = res.tapIndex;
					},
					fail: res => {
						console.log(res);
					}
				});
			},
			// 发送数据
			async send() {
				let user = uni.getStorageSync('user');
				let that = this;
                let array=[]
                
                if(that.selectPer.length==0)
                {
                    return this.$mHelper.toast('请至少选择一个落实部门');
                }
                if(that.sendDate.name=="")
                {
                    return this.$mHelper.toast('请填写任务内容');
                }
                
                that.selectPer.map(function(item){
                    array.push(item.id)
                })
				uni.request({
					method: 'POST',
					url: 'http://nmt.yunshangwulian.vip/api/agendas', //仅为示例，并非真实接口地址。
					data: {
						'api_token': user.api_token,
						'name': that.sendDate.name,
						'supervisor_user_id': that.sendDate.supervisor_user_id,
						'meeting_id': that.sendDate.metting_id,
						'user_id': user.id,
						'executive_end_data': that.date,
						'executive_departments': array,
					},
					header: {
						'Accept': 'application/json' //自定义请求头信息
					},
					success: (res) => {
						console.log(res)
						if (res.statusCode == 201) {
							this.$mHelper.toast('创建成功');
                            uni.navigateBack({
                                 delta: 2
                            });
						} else {
							this.$mHelper.toast('提交错误');
						}

					}
				});
			},


			goselectitem() {
				uni.navigateTo({
					url: '/pages/content/department'
				})
			},
			
			// 删除选择的部门
			delclick( index ){
				console.log( index);
				this.selectPer.splice(index, 1);
				this.selectPerids.splice(index, 1);
				this.number = this.selectPer.length;
				
			}

		}
	};
</script>

<style lang="scss">
	page {
		background-color: $page-color-base;
	}

	/*表单标题*/
	.input-t {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: $spacing-base;
		margin-top: $spacing-base;
		font-size: $font-base;

	}

	.input-quick {
		position: relative;
		padding-right: 40upx;

		.iconfont {
			font-size: $font-sm;
		}
	}

	.input-body {
		background: $color-white;
		padding: $spacing-sm $spacing-base;

		.gender-item {
			margin-right: 20upx;

			.gender-item-text {
				padding-left: 10upx;
			}

		}
	}

	.input-textare {
		height: 200upx;
		font-size: 34upx;
		line-height: 50upx;
		width: 100%;
		box-sizing: border-box;
		padding: 20upx 30upx 0;
	}
</style>
